<template>
	<view class="bg min100 bgimage" style="padding-bottom:240rpx;display: flex;align-items: center;justify-content: center;position: relative;">
		<image src="../../static/more.png" style="transform: rotate(180deg);width: 50rpx;height: 50rpx;position: absolute;left: 40rpx;top: 40rpx;" @click="goBack" ></image>
	    <div id="container" style='width: 100%;height: 94vh;'></div>
	</view>
</template>

<script>

	import * as THREE from 'three'
	import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
	import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
	import { DragControls } from "three/examples/jsm/controls/DragControls";
	export default {
		data() {
			return {
				btnDisabled:false,
				preShow: false,
				id: "",
				
				  publicPath: process.env.BASE_URL,
				      mesh: null,
				      camera: null,
				      scene: null,
				      renderer: null,
				      controls: null,
				info: {},
				model_url:"",
				scene:null
			}
		},
		onLoad(options) {
			this.model_url = options.url;
			this.init()
			
		},
  mounted() {
  },
		 

		 
		methods: {
			rotateset(){
				// if (this.renderer && this.stats) {
				     //更新控制器
					 console.log(this.renderer)
				     // this.renderer.render();
				     // this.render();/
				
				     //更新性能插件
				     // requestAnimationFrame(this.rotateset.bind(this));
				   // }
				   // if (this.scene) {
				   //   const axis = new THREE.Vector3(0, 1, 0); //向量axis
				   //   this.scene.rotateOnAxis(axis, Math.PI / 100); //绕axis轴旋转π/100
				   // }
			},


			goBack(){
				uni.navigateBack({
					
				})
			},
			handlePre(){
				uni.navigateTo({
					name:'homeShow'
				})
			},
			 init() {
			      this.createScene() // 创建场景
			      this.loadGLTF() // 加载GLTF模型
			      this.createLight() // 创建光源
			      this.createCamera() // 创建相机
			      this.createRender() // 创建渲染器
			      this.createControls() // 创建控件对象
			      this.render() // 渲染
				  
			    },
			    // 创建场景
			    createScene() {
			      this.scene = new THREE.Scene()
			    },
			    // 加载GLTF模型
			    loadGLTF() {
			      const THIS = this
			      const loader = new GLTFLoader()
				  // this.mesh = new THREE.Mesh(loader)
			      loader.load(this.model_url, model => {
					this.mesh = model.scene;
			        model.scene.children[0].scale.set(50, 50, 50)
			        this.scene.add(model.scene.children[0])
			      })
				
			    },
			
			    // 创建光源
			    createLight() {
					var point = new THREE.PointLight(0xffffff,20)
					      point.position.set(2800 ,100, 1) // 点光源位置
					      this.scene.add(point) // 点光源添加到场景中
					      // 环境光
					      var ambient = new THREE.AmbientLight(0xffffff)
					      this.scene.add(ambient) // 环境光添加到场景中
			      // 环境光
			//       const ambientLight = new THREE.AmbientLight(0xffffff, 0.1) // 创建环境光
			//       this.scene.add(ambientLight) // 将环境光添加到场景
			
			//       const spotLight = new THREE.SpotLight(0xffffff) // 创建聚光灯
			//       spotLight.position.set(150, 150, 150)
			//       spotLight.castShadow = true
			//       this.scene.add(spotLight)
			    },
			    // 创建相机
			    createCamera() {
			
			      const element = document.getElementById('container')
			      const width = element.clientWidth // 窗口宽度
			      const height = element.clientHeight // 窗口高度
			      const k = 1/3// 窗口宽高比
			      // PerspectiveCamera( fov, aspect, near, far )
				  this.camera = new THREE.PerspectiveCamera(40, k, 1, 10000)
				      this.camera.position.set(2800, 800, 600) // 设置相机位置
				      this.camera.lookAt(this.scene.position) // 设置
			      // this.camera = new THREE.PerspectiveCamera(35, k, 0.1, 1000)
			      // this.camera.position.set(500, 500, 500) // 设置相机位置
			
			      this.camera.lookAt(new THREE.Vector3(10, 40, 0)) // 设置相机方向
			      this.scene.add(this.camera)
			    },
			    // 创建渲染器
			    createRender() {
			      const element = document.getElementById('container')
			      this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
			      this.renderer.setSize(element.clientWidth, element.clientHeight) // 设置渲染区域尺寸
			      this.renderer.shadowMap.enabled = true // 显示阴影
			      this.renderer.shadowMap.type = THREE.PCFSoftShadowMap
			      // this.renderer.setClearColor(0x3f3f3f, 1) // 设置背景颜色
			      element.appendChild(this.renderer.domElement)
			    },
			
			    render() {
			      if (this.scene) {
			        // this.scene.rotation.z += 0.01
			        // this.scene.rotation.y += 0.01
			      }
				  console.log(this.controls)
				  // this.scene.rotationX = (Math.PI/4)
				  // this.scene.rotationX = 0.01
				  // this.scene.rotation.z +=0.1
				  // this.scene.rotation.y +=0.1
				  
			      // this.renderer.render(this.scene, this.camera)
				  
			      requestAnimationFrame(this.render)
				  this.controls.update();
				  this.renderer.render(this.scene, this.camera)
				  var axis = new THREE.Vector3(0,1,0);//向量axis
				  // if (rotateObj) {
				  // 			rotateObj.forEach(item => {
				  // 				item.rotation.z -= 0.02
				  // 			})
				  // 		}
				  this.scene.rotateOnAxis(axis,Math.PI/4);//绕axis轴旋转π/8
				  
				  // this.rotateset();
			    },
			    // 创建控件对象
			    createControls() {
			      this.controls = new OrbitControls(this.camera, this.renderer.domElement)
				  this.controls.autoRotate  =true	
			    },
		
		
			// 预览图片
			toBuy() {
				this.btnDisabled=true;
				this.$http('api/orders/goodsApply', {
					id: this.id
				}).then(res => {
					this.btnDisabled=false;
					uni.navigateTo({
						url: '../pay/collectPay?order_id=' + res.order_id
					})
				})
			},
			// 复制
			copyAddress(val) {
				// #ifdef APP-PLUS
				uni.setClipboardData({
					data: val,
					success: function() {
						uni.hideToast()
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: '复制成功',
									icon: 'none'
								})
							}
						});
					}
				});
				// #endif
				// #ifdef H5
				let that = this;
				this.$copyText(val).then(function(e) {
					uni.showToast({
						title: "复制成功!",
						icon: "none"
					})
				}, function(e) {
					uni.showToast({
						title: "复制失败!",
						icon: "none"
					})
				})
				// #endif
			},
		}
	}
</script>

<style lang="less" scoped>
	// @keyframes changDeg{
	
 //    0% {
 //                transform: rotateX(360deg) rotateY(0deg);
 //            }
	// 		50% {
	// 		            transform: rotateX(360deg) rotateY(360deg);
	// 		        }
 //            100% {
 //                transform: rotateX(360deg) rotateY(0deg);
 //            }
	
	// }
	#container{
		animation:changDeg 15s linear 10s infinite;
	}
	.userImg {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.buyBtn {
		font-size: 28rpx;
		color: #040404;
		line-height: 80rpx;
		height: 80rpx;
		background: #DDC37F;
		border-radius: 40rpx;
		width: 210rpx;
	}


	.copyImg {
		width: 24rpx;
		height: 24rpx;
	}

	.btmWrap {
		position: fixed;
		z-index: 10;
		width: 100%;
		bottom: 0;
		background: #040404;
	}

	.tipsLeft {
		background: #DDC37F;
		color: #2f2f2e;
	}

	.collectImg {
		width: 75%;
		display: block;
		margin: 0 auto;
		height: auto;
		position: relative;
	}

	.tipsRight {
		background: rgba(239, 170, 28, .3);
	}

	.topWrap {
		padding-top: 120rpx;
		background: url(../../static/detailsBg.png) 0 0 no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 926rpx;
		position: relative;
	}


	.infoWrap {

		::v-deep  img {
			width: 100% !important;
			height: auto;
		}
	}

	.itemTips {
		font-size: 28rpx;
		background: #DEE4E8 !important;
		border-radius: 40rpx;
	}
	
	.topContent {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 30rpx;
		z-index: 10;
		width: 100%;
		text-align: center;
	}
	.bgimage{
		background-image: url(../../static/jgd.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
</style>
